<template>
  <div class="page">
    <div class="page-list">
      <div class="page-item" v-for="(item, index) in page_list" :key="index">
        <div class="page-title" @click="to_page(item)">
          {{ index + 1 }} --- {{ item.meta ? item.meta.title : "" }} ---
          {{ item.path }}
        </div>
        <div class="page-child">
          <div
            class="child-item"
            v-for="(sub, sindex) in item.children"
            :key="sindex"
            @click="to_sub(item, sub)"
          >
            {{ index + 1 }}.{{ sindex + 1 }} ---
            {{ sub.meta ? sub.meta.title : "" }} ---
            {{ sub.path }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  <script>
import { mapState } from "vuex";
export default {
  name: "index",
  components: {},
  data() {
    return {
      page_list: [],
      //
    };
  },
  computed: {
    ...mapState([
      //
    ]),
  },

  watch: {},
  created() {},
  mounted() {
    this.page_list = this.$router.options.routes;

    this.$log("路由", this.page_list);
  },
  methods: {
    to_page(item) {
      let { href } = this.$router.resolve({
        path: item.path,
      });
      window.open(href, "_blank");
    },
    to_sub(item, sub) {
      let { href } = this.$router.resolve({
        path: item.path + "/" + sub.path.replace("/", ""),
      });
      window.open(href, "_blank");
    },
  },
};
</script>
  

  <style scoped lang="less">
.page-item {
  width: fit-content;
  border: 1px solid #ddd;
  margin-bottom: 15px;
  .page-title {
    cursor: pointer;
    &:hover {
      color: #f00;
    }
  }
}
.child-item {
  padding: 10px;
  margin-bottom: 15px;
  cursor: pointer;
  &:hover {
    color: #f00;
  }
}
</style>
